<template>
  <div>
    <!--:model="shopActive" 数据双向绑定-->
    <!--ref="shopActiveForm" id="shopActiveForm",给form去一个名字-->
    <!--:rules="formRules" 校验规则-->
    <el-form :model="shopActive" ref="shopActiveForm" :rules="formRules" label-position="left" label-width="100px" class="demo-ruleForm login-container">
      <h3 class="title">店铺激活</h3>
      <el-form-item prop="activeId"label="激活码">
        <el-input type="text" v-model="shopActive.activeId" auto-complete="off" placeholder="请输入店铺名称！"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="doActive" >激活</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword:'',
      //shopActive:shopActive 为了做数据表单校验不要嵌套对象
      shopActive: {
        shopId:null,
        activeId:null
      },
      formRules: {
        activeId: [
          { required: true, message: '请输入激活码!', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    getShopId(){
      let url = this.$route.path;
      let path = url.split("/");
      let id = path.slice(path.length-1);
      this.shopActive.shopId=id-0;//这里-0 是为了将id字符串的类型转化为number类型
      // console.log(this.shopActive)
    },
    //提交激活
    doActive(){
      this.$refs.shopActiveForm.validate((valid) => {
        //校验表单成功后才做一下操作
        if (valid) {
          this.$confirm('确认激活吗？', '提示', {}).then(() => {
            //拷贝后面对象的值到新对象,防止后面代码改动引起模型变化
            let para = Object.assign({}, this.shopActive); //shopActive 本身这个参数里面就有店铺id和激活码UUID
            // 为了后台好接收，封装一个对象放到里面
            //判断是否有id有就是修改,否则就是添加
            this.$http.post("/shop/active",para).then((res) => {
              if(res.data.success){
                this.$message({
                  message: '操作成功!',
                  type: 'success'
                });
                //重置表单
                this.$refs['shopActiveForm'].resetFields();
                //跳转登录页面
                this.$router.push({ path: '/login' });
              }
              else{
                this.$message({
                  message: res.data.message,
                  type: 'error'
                });
              }

            });
          });
        }
      })
    }
  },
  mounted() {
    this.getShopId();
  }
}

</script>
<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 500px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}

.map {
  width: 100%;
  height: 300px;
}
.searchinput{
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
}
</style>
